<template>
	<view class="apply-proxy-page">
		<image src="../../static/images/bg_2.png" mode="widthFix" class="bg-img"></image>
		<view class="main-box">
			<view class="form-item">
				<view class="label is-required">姓名</view>
				<view class="value-box">
					<input type="text" v-model="form.name" class="input" placeholder-class="placeholder"
						placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label is-required">手机号码</view>
				<view class="value-box">
					<input type="text" v-model="form.phone" class="input" placeholder-class="placeholder"
						placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label is-required">公司名称</view>
				<view class="value-box">
					<input type="text" v-model="form.com_name" class="input" placeholder-class="placeholder"
						placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label is-required">详细地址</view>
				<view class="value-box">
					<input type="text" v-model="form.address" class="input" placeholder-class="placeholder"
						placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label-box">
					<view class="">请上传营业执照等资质</view>
					<view class="desc">可上传jpg、png，且不超过500KB</view>
				</view>
				<view class="upload-box">
					<u-upload ref="uUpload" width="160" height="160" :limitType="['jpg','png']" :auto-upload="false"
						:custom-btn="true" :border-bottom="false" :show-progress="false"
						@on-remove="handlePictureRemove" @on-choose-complete="handlePictureUpload">
						<view slot="addBtn" class="button--upload">
							<u-icon name="/static/images/icon_camera.png" width="54" />
						</view>
					</u-upload>
				</view>
			</view>

			<view class="form-item">
				<view class="label-box">
					<view class="">产品图片/视频上传</view>
				</view>
				<view class="upload-box">
					<u-upload ref="uUpload" width="160" height="160" :auto-upload="false" :custom-btn="true"
						:border-bottom="false" :show-progress="false" @on-remove="handlePictureRemove2"
						@on-choose-complete="handlePictureUpload2">
						<view slot="addBtn" class="button--upload">
							<u-icon name="/static/images/icon_camera.png" width="54" />
						</view>
					</u-upload>
				</view>
			</view>
		</view>
		<view class="footer-box">
			<view class="btn active" @tap="onSubmit">提交申请</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/utils/tools.js';
	import {
		postFranchise
	} from '../../../api/user';

	const app = getApp()
	export default {

		data() {
			return {
				// 表单数据
				form: {
					name: null,
					phone: null,
					com_name: null,
					address: null,
					pictures: [],
					pictures2: [],
				},
			}
		},
		async onLoad(options) {

		},
		async onShow() {

		},

		methods: {
			onSubmit() {
				let zhengze = /^1[3-9]\d{9}$/;
				if (!this.form.name) return this.my_toast('请填写姓名');
				if (!this.form.phone || !zhengze.test(this.form.phone)) return this.my_toast('请填写正确手机号');
				if (!this.form.com_name) return this.my_toast('请填写公司名称');
				if (!this.form.address) return this.my_toast('请填写公司详细地址');
				if (this.form.pictures.length == 0) return this.my_toast('请上传营业执照');
				if (this.form.pictures2 == 0) return this.my_toast('请上传产品图片');
				postFranchise({
					name: this.form.com_name,
					real_name: this.form.name,
					logo: this.form.pictures[0],
					tel: this.form.phone,
					address: this.form.address,
					img: this.form.pictures2.join(','),
				}).then(res => {
					if (res.code != 1) return this.my_toast(res.msg);
					this.my_toast('提交成功，客服人员会主动联系你', () => {
						uni.navigateBack({
							delta: 9
						})
					});
				})
			},

			my_toast(title, callback = null) {
				uni.showToast({
					icon: 'none',
					title,
					callback
				})
			},

			// 图片上传
			handlePictureUpload(lists, index) {
				console.log("lists", lists);
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});

				const len = lists.length;
				const count = this.form.pictures.length;
				for (let i = count; i < len; ++i) {
					const file = {
						...lists[i]
					};
					try {
						uploadFile(file.url).then(res => {
							uni.hideLoading();
							this.form.pictures.push(res.url);
						}).catch(err => {
							uni.hideLoading();
							this.$toast(err.msg || "上传失败");
						});
					} catch (e) {
						uni.hideLoading();
						this.$toast({
							title: "上传失败"
						});
					}
				}
			},

			// 图片上传2
			handlePictureUpload2(lists, index) {
				console.log("lists", lists);
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});

				const len = lists.length;
				const count = this.form.pictures2.length;
				for (let i = count; i < len; ++i) {
					const file = {
						...lists[i]
					};
					try {
						uploadFile(file.url).then(res => {
							uni.hideLoading();
							this.form.pictures2.push(res.url);
						}).catch(err => {
							uni.hideLoading();
							this.$toast(err.msg || "上传失败");
						});
					} catch (e) {
						uni.hideLoading();
						this.$toast({
							title: "上传失败"
						});
					}
				}
			},

			// 图片删除
			handlePictureRemove(index, lists, name) {
				this.form.pictures.splice(index, 1);
			},

			// 图片删除
			handlePictureRemove2(index, lists, name) {
				this.form.pictures2.splice(index, 1);
			},
		},
	}
</script>

<style lang="scss">
	@import "index.scss";
</style>